<template>
  <div class="comment-page">
    <headers></headers>
    <div class="page-content">
      <div class="comment-container">
        <div class="page-header">
          <h2>{{attractionName}} - 评论区</h2>
        </div>
        
        <!-- 评论输入区域 -->
        <div class="comment-input-section">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="写下您的评论..."
            v-model="content"
          ></el-input>
          <div class="rating-section">
            <span class="rating-label">您的评分：</span>
            <el-rate v-model="score" show-text></el-rate>
          </div>
          <div class="comment-actions">
            <el-button type="primary" @click="submitComment">发表评论</el-button>
          </div>
        </div>

        <!-- 评论列表 -->
        <div class="comments-list">
          <div class="list-header">
            <h3>全部评论 ({{total}})</h3>
          </div>
          <div class="comment-item" v-for="(item, index) in comments" :key="index">
            <div class="comment-user">
              <img class="user-avatar" :src="item.avatar" :alt="item.createBy">
              <span class="user-name">{{item.createBy}}</span>
            </div>
            <div class="comment-content">
              <div class="comment-rating">
                <el-rate
                  v-model="item.score"
                  disabled
                  show-score
                  text-color="#ff9900">
                </el-rate>
              </div>
              <div class="comment-text">{{item.content}}</div>
              <div class="comment-time">{{item.createTime}}</div>
            </div>
          </div>
          
          <!-- 分页 -->
          <div class="pagination-section">
            <el-pagination
              background
              @current-change="handlePageChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <bottoms></bottoms>
  </div>
</template>

<script>
import { getSysCommentsPage, saveSysComments } from '../../api/api'
import headers from '@/components/header'
import bottoms from '@/components/bottom'

export default {
  name: 'AttractionsComment',
  components: {
    headers,
    bottoms
  },
  data() {
    return {
      attractionId: '',
      attractionName: '',
      content: '',
      score: 0,
      comments: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      userId: null
    }
  },
  methods: {
    submitComment() {
      if (!this.content) {
        this.$message({
          message: '请输入评论内容',
          type: 'warning'
        })
        return
      }
      if (!this.score) {
        this.$message({
          message: '请给出评分',
          type: 'warning'
        })
        return
      }

      const param = {
        content: this.content,
        score: this.score,
        attractionsId: this.attractionId,
        userId: this.userId
      }

      saveSysComments(param).then(res => {
        if (res.code === 1000) {
          this.$message({
            message: '评论成功',
            type: 'success'
          })
          this.content = ''
          this.score = 0
          this.getComments()
        }
      })
    },
    getComments() {
      const params = {
        attractionsId: this.attractionId,
        pageSize: this.pageSize,
        pageNumber: this.currentPage
      }
      
      getSysCommentsPage(params).then(res => {
        if (res.code === 1000) {
          this.comments = res.data.records
          this.total = res.data.total
        }
      })
    },
    handlePageChange(page) {
      this.currentPage = page
      this.getComments()
    }
  },
  mounted() {
    this.attractionId = this.$route.query.id
    this.attractionName = this.$route.query.name
    this.userId = JSON.parse(window.localStorage.getItem('user_info')).id
    this.getComments()
  }
}
</script>

<style scoped>
.comment-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.comment-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  padding: 20px;
}

.page-header {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.comment-input-section {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.rating-section {
  margin: 15px 0;
  display: flex;
  align-items: center;
}

.rating-label {
  margin-right: 10px;
  color: #606266;
}

.comment-actions {
  margin-top: 15px;
  text-align: right;
}

.comments-list {
  padding: 20px 0;
}

.list-header {
  margin-bottom: 20px;
}

.list-header h3 {
  margin: 0;
  color: #303133;
}

.comment-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.comment-user {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-name {
  font-weight: 500;
  color: #303133;
}

.comment-content {
  padding-left: 50px;
}

.comment-rating {
  margin-bottom: 8px;
}

.comment-text {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 8px;
}

.comment-time {
  color: #909399;
  font-size: 12px;
}

.pagination-section {
  margin-top: 20px;
  text-align: center;
}
</style> 